<template>
  <!-- 导航 -->
  <div class="navbar bg-base-100" style="padding: 0 8px; height: 64px">
    <!-- 宽屏logo -->
    <div class="flex-1 hidden-xs-only bg-base-100" v-if="!set.topbtn">
      <router-link
        v-if="isRootPath"
        class="btn btn-ghost normal-case text-xl"
        to="/postlist/0"
      >
        <ScLogo />
        <div class="site-title">SC中文社区</div>
      </router-link>
      <div v-else @click="goBack" class="btn btn-ghost normal-case text-xl">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
        返回
      </div>
    </div>

    <!-- 窄屏折叠logo，抽屉菜单 -->
    <div class="hidden-sm-and-up" v-if="set.menu && !set.topbtn">
      <input id="my-drawer" type="checkbox" class="drawer-toggle" />

      <div class="drawer-content" v-if="isRootPath">
        <label for="my-drawer" tabindex="0" class="btn btn-ghost btn-circle">
          <ScLogo />
        </label>
      </div>
      <div v-else @click="goBack" class="btn btn-ghost normal-case text-xl">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
        返回
      </div>
      <!-- 抽屉菜单 -->
      <div class="drawer-side" style="z-index: 2">
        <label for="my-drawer" class="drawer-overlay"></label>
        <ul
          class="menu p-4 w-80 h-full bg-base-200 text-base-content item"
          style="height: 100%; width: 55%"
        >
          <!-- Sidebar content here -->
          <li v-if="!userInfo.state.isLogin">
            <div @click="openlogin">
              <el-icon :size="26" style="padding: 0 2px">
                <User />
              </el-icon>
              <el-text>登录</el-text>
            </div>
          </li>
          <li>
            <router-link to="/postlist/0">
              <el-icon :size="26" style="padding: 0 2px">
                <House />
              </el-icon>
              <el-text>主页</el-text>
            </router-link>
          </li>
          <li>
            <router-link to="/ModList">
              <el-icon :size="25" style="padding: 0 2px">
                <ScMod />
              </el-icon>
              <el-text>资源大厅</el-text>
            </router-link>
          </li>
          <li v-if="userInfo.state.isLogin">
            <router-link to="/user">
              <el-icon :size="26" style="padding: 0 2px">
                <User />
              </el-icon>
              <el-text>个人中心</el-text>
            </router-link>
          </li>
          <!-- <li @click="bailanle">
            <div>
              <el-icon :size="28" style="padding: 0 2px">
                <Message />
              </el-icon>
              <el-text>消息</el-text>
            </div>
          </li> -->
          <!-- <li @click="handleLiClick">
            <div>
              <input
                ref="toggleInput"
                checked
                type="checkbox"
                class="toggle toggle-sm"
                data-toggle-theme="dark,light"
                data-act-class="ACTIVECLASS"
                v-model="iconid"
                @click="bailanle"
              />
              <el-text>
                <el-icon v-if="iconid">
                  <Moon />
                </el-icon>
                <el-icon v-else> <Sunny /> </el-icon>切换主题
              </el-text>
            </div>
          </li> -->
          <li v-if="userInfo.data.isAdmin">
            <router-link to="/admin">
              <el-icon :size="26" style="padding: 0 2px">
                <setting />
              </el-icon>
              <span>后台管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/setup">
              <el-icon :size="26" style="padding: 0 2px">
                <setting />
              </el-icon>
              <span>设置</span>
            </router-link>
          </li>
          <li v-if="userInfo.state.isLogin">
            <div @click="out">
              <el-icon
                :size="26"
                style="padding: 0 2px; color: var(--el-color-danger)"
                type="danger"
                ><Close
              /></el-icon>
              <el-text type="danger">退出登录</el-text>
            </div>
          </li>
          <li>
            <router-link to="/donation">
              <el-text size="small" type="primary">赞助我们</el-text>
            </router-link>
          </li>
          <el-divider
            content-position="left"
            border-style="background-color: transparent;"
            >友情链接</el-divider
          >
          <ToolUrls />
        </ul>
      </div>
    </div>

    <!-- 弹窗菜单 -->
    <div
      class="hidden-sm-and-up"
      ref="menu"
      v-else-if="!set.topbtn"
      @mouseleave="clickDetails(false)"
      @click="clickDetails(true)"
    >
      <summary class="m-1 btn bg-base-100 btn-ghost">
        <ScLogo />
      </summary>
      <ul
        v-if="openDetails"
        class="p-2 shadow menu dropdown-content z-[1] bg-base-100 w-52"
        style="
          box-shadow: var(--el-box-shadow-light);
          border: none;
          width: 14rem;
          border-radius: var(--rounded-btn);
          position: absolute;
          top: 3.5rem;
        "
      >
        <li v-if="!userInfo.state.isLogin">
          <div @click="openlogin">
            <el-icon :size="26" style="padding: 0 2px">
              <User />
            </el-icon>
            <el-text>登录</el-text>
          </div>
        </li>
        <li>
          <router-link to="/postlist/0">
            <el-icon :size="26" style="padding: 0 2px">
              <House />
            </el-icon>
            <el-text>主页</el-text>
          </router-link>
        </li>
        <li>
          <router-link to="/ModList">
            <el-icon :size="25" style="padding: 0 2px">
              <ScMod />
            </el-icon>
            <el-text>资源大厅</el-text>
          </router-link>
        </li>
        <li v-if="userInfo.state.isLogin">
          <router-link to="/user">
            <el-icon :size="26" style="padding: 0 2px">
              <User />
            </el-icon>
            <el-text>个人中心</el-text>
          </router-link>
        </li>
        <!-- <li @click="bailanle">
            <div>
              <el-icon :size="28" style="padding: 0 2px">
                <Message />
              </el-icon>
              <el-text>消息</el-text>
            </div>
          </li> -->
        <!-- <li @click="handleLiClick">
            <div>
              <input
                ref="toggleInput"
                checked
                type="checkbox"
                class="toggle toggle-sm"
                data-toggle-theme="dark,light"
                data-act-class="ACTIVECLASS"
                v-model="iconid"
                @click="bailanle"
              />
              <el-text>
                <el-icon v-if="iconid">
                  <Moon />
                </el-icon>
                <el-icon v-else> <Sunny /> </el-icon>切换主题
              </el-text>
            </div>
          </li> -->
        <li v-if="userInfo.data.isAdmin">
          <router-link to="/admin">
            <el-icon :size="26" style="padding: 0 2px">
              <setting />
            </el-icon>
            <span>后台管理</span>
          </router-link>
        </li>
        <li>
          <router-link to="/setup">
            <el-icon :size="26" style="padding: 0 2px">
              <setting />
            </el-icon>
            <span>设置</span>
          </router-link>
        </li>
        <li v-if="userInfo.state.isLogin">
          <div @click="out">
            <el-icon
              :size="26"
              style="padding: 0 2px; color: var(--el-color-danger)"
              type="danger"
              ><Close
            /></el-icon>
            <el-text type="danger">退出登录</el-text>
          </div>
        </li>
        <el-divider
          content-position="left"
          border-style="background-color: transparent;"
        ></el-divider>
        <ToolUrls />
      </ul>
    </div>

    <!-- 后台菜单 -->
    <div
      class="flex-1 bg-base-100"
      v-if="set.topbtn"
      @click="set.topmenu = true"
    >
      <div class="btn btn-ghost normal-case text-xl">
        <ScLogo v-if="!set.ismobile" />
        <div class="site-title">后台管理</div>
      </div>
    </div>

    <!-- 分割元素 -->
    <div class="flex-grow" />
    <div class="flex-none">
      <!-- 右边选项卡 -->
      <ul
        class="menu menu-horizontal px-1"
        style="align-items: center; padding: 0 8px"
      >
        <!-- mod -->
        <li>
          <router-link to="/ModList">
            <el-icon :size="25" style="padding: 0 2px">
              <ScMod />
            </el-icon>
          </router-link>
        </li>
        <!-- 消息 -->
        <!-- <li class="hidden-xs-only" @click="bailanle">
          <div class="indicator">
            <span
              class="indicator-item badge"
              v-if="userInfo.state.unreadMessage != 0"
              >{{ userInfo.state.unreadMessage }}</span
            >
            <el-icon :size="28" style="padding: 0 2px">
              <Message />
            </el-icon>
          </div>
        </li> -->
        <!-- 工具 -->
        <li class="hidden-xs-only" @click="menuClick('tool', true)">
          <details class="dropdown mb-32 rounded-box" ref="tool">
            <summary class="m-1 btn bg-base-100 btn-ghost">
              <el-icon :size="26">
                <svg
                  viewBox="0 0 1024 1024"
                  xmlns="http://www.w3.org/2000/svg"
                  width="200"
                  height="200"
                  style="margin: 0"
                >
                  <path
                    d="M817.87 556.31h-63.58v-66.24A42.27 42.27 0 0 0 712 447.8h-84.81a42.27 42.27 0 0 0-42.27 42.27v66.24H436.57v-66.24a42.27 42.27 0 0 0-42.27-42.27h-84.83a42.27 42.27 0 0 0-42.27 42.27v66.24h-61.83A22.39 22.39 0 0 0 183 578.7a22.39 22.39 0 0 0 22.39 22.39h61.81v65.55a42.27 42.27 0 0 0 42.27 42.27h84.83a42.27 42.27 0 0 0 42.27-42.27v-65.55h148.36v65.55a42.27 42.27 0 0 0 42.27 42.27H712a42.27 42.27 0 0 0 42.27-42.27v-65.55h63.58a22.39 22.39 0 0 0 22.39-22.39 22.39 22.39 0 0 0-22.37-22.39z m-438.64 95.26h-54.69V505.14h54.69z m317.72 0h-54.69V505.14H697z"
                  ></path>
                  <path
                    d="M823 202.58h-90.81v-63.09a71.88 71.88 0  0 0-71.88-71.88H363.19a71.88 71.88 0 0 0-71.88 71.88v63.08h-90.12A137.17 137.17 0 0 0 64 339.75v479a137.17 137.17 0 0 0 137.19 137.14H823a137.17 137.17 0 0 0 137.19-137.17v-479A137.17 137.17 0 0 0 823 202.58z m-474.36-54.1A23.52 23.52 0 0 1 372.17 125h279.16a23.52 23.52 0 0 1 23.52 23.52v54.1h-326.2z m554.23 673.31a76.76 76.76 0 0 1-76.76 76.76h-628a76.76 76.76 0 0 1-76.76-76.76V336.67a76.76 76.76 0 0 1 76.76-76.76h628a76.76 76.76 0 0 1 76.76 76.76z"
                  ></path>
                </svg>
              </el-icon>
            </summary>
            <ul
              class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52"
              @click="menuClick('tool')"
              style="width: 10rem"
              @mouseleave="menuClick('tool')"
            >
              <ToolUrls />
              <li>
                <router-link to="/setup">
                  <el-icon :size="22">
                    <setting />
                  </el-icon>
                  <span>设置</span>
                </router-link>
              </li>
            </ul>
          </details>
        </li>
        <!-- 主题切换 -->
        <!-- <li class="hidden-xs-only">
          <div class="indicator">
            <label class="swap swap-rotate">
              <input
                type="checkbox"
                data-toggle-theme="dark,light"
                data-act-class="ACTIVECLASS"
                style="width: 22px; height: 22px"
              />
              <svg
                class="swap-off fill-current w-10 h-10"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
              >
                <path
                  d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
                />
              </svg>
              <svg
                class="swap-on fill-current w-10 h-10"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
              >
                <path
                  d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
                />
              </svg>
            </label>
          </div>
        </li> -->
        <!-- 个人中心 -->
        <li v-if="set.ismobile && userInfo.state.isLogin">
          <router-link to="/user">
            <user-icon
              :src="userInfo.data.headurl"
              :alt="userInfo.data.nickname"
              :size="32"
            />
          </router-link>
        </li>
        <li v-else>
          <div v-if="!userInfo.state.isLogin" @click="openlogin">
            <el-icon :size="25" style="padding: 0 2px">
              <UserFilled />
            </el-icon>
          </div>
          <details
            class="dropdown mb-32 dropdown-end"
            ref="user"
            @click="menuClick('user', true)"
            v-else-if="set.ismobile"
          >
            <summary class="m-1 btn-ghost">
              <user-icon
                :src="userInfo.data.headurl"
                :alt="userInfo.data.nickname"
                :size="32"
              />
            </summary>
            <ul
              class="p-2 shadow menu dropdown-content z-[1] rounded-box w-52"
              @click="menuClick('user')"
              @mouseleave="menuClick('user')"
              style="width: 10rem; box-shadow: var(--el-box-shadow-light)"
            >
              <li>
                <router-link to="/user"> 个人中心 </router-link>
              </li>
              <li v-if="userInfo.data.isAdmin">
                <router-link to="/admin"> 后台管理 </router-link>
              </li>
              <li>
                <a @click="out">退出登录</a>
              </li>
            </ul>
          </details>
          <details
            class="dropdown mb-32 dropdown-end"
            ref="user"
            @click="menuClick('user', true)"
            v-else
          >
            <summary class="m-1 btn-ghost">
              <user-icon
                :src="userInfo.data.headurl"
                :size="32"
                :alt="userInfo.data.nickname"
              />
            </summary>
            <ul
              class="p-2 shadow menu dropdown-content z-[1] rounded-box w-52"
              @click="menuClick('user')"
              @mouseleave="menuClick('user')"
              style="width: 10rem; box-shadow: var(--el-box-shadow-light)"
            >
              <li>
                <router-link to="/user"> 个人中心 </router-link>
              </li>
              <li v-if="userInfo.data.isAdmin">
                <router-link to="/admin"> 网站后台 </router-link>
              </li>
              <li>
                <a @click="out">退出登录</a>
              </li>
            </ul>
          </details>
        </li>
      </ul>
    </div>
    <!-- <el-dialog
      v-model="userInfo.state.isLoginDialogVisible"
      :title="title"
      :draggable="true"
      :fullscreen="set.ismobile"
    >
      <UserLogin @childEvent="settitle" />
    </el-dialog> -->

    <!-- 遮罩 -->
    <div class="bg" v-if="bgshow" :class="bgstate" @click="start"></div>
    <!-- 登录卡片 -->
    <div class="bg" style="pointer-events: none" v-if="signin">
      <div class="loginbody" :class="loginstate">
        <el-image
          src="../../../public/image/109834519_p0.jpg"
          class="hidden-xs-only titleimg"
          alt="登录背景"
        ></el-image>

        <!-- 登录 -->
        <el-form
          :model="loginconfig"
          class="form"
          label-width="4rem"
          label-position="top"
        >
          <el-form-item>
            <span class="title">登录</span>
          </el-form-item>
          <!-- 账号 -->
          <el-form-item label="邮箱" prop="user">
            <el-input
              v-model="loginconfig.user"
              type="email"
              placeholder="请输入邮箱"
            />
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="密码" prop="pass">
            <el-input
              @keyup.enter="showVcode = true"
              v-model="loginconfig.pass"
              type="password"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <!-- 记住账号 -->
            <el-checkbox v-model="remember" label="记住账号" size="large" />
          </el-form-item>

          <!-- 去注册 -->
          <el-form-item>
            <el-text>还没有账号？</el-text>
            <el-link
              href="https://suancaixianyu.cn/reg.html"
              target="_blank"
              type="primary"
            >
              去注册
            </el-link>
          </el-form-item>
          <!-- 按钮组 -->
          <el-form-item>
            <el-button type="primary" @click="showVcode = true">登录</el-button>
            <el-button @click="start">取消</el-button>
          </el-form-item>
        </el-form>

        <!-- 验证码 -->
        <Vcode
          :show="showVcode"
          @success="onSuccess"
          @close="showVcode = false"
          :imgs="captcha.src"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Cfg from '@/config/config'
import Method from '@/globalmethods'
import ScLogo from '@comps/icons/ScLogo.vue'
import ScMod from '@comps/icons/ScMod.vue'
import UserLogin from '@comps/user/login.vue'
import ToolUrls from '@comps/navigation/ToolUrls.vue'

import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, watch } from 'vue'
import type { Ref } from 'vue'
import UserIcon from '@comps/user/userIcon.vue'
import user from '@comps/user/index.vue'
import Vcode from 'vue3-puzzle-vcode'

export default {
  name: 'NavigationMenu',
  computed: {
    user() {
      return user
    },
  },
  components: {
    UserIcon,
    ScLogo,
    ScMod,
    UserLogin,
    ToolUrls,
    Vcode,
  },
  data() {
    // let src = Method.getHostUrl('/captcha')
    return {
      showVcode: false, // 显示验证码
      type: 'login', // 登录类型
      loginconfig: {
        user: '',
        pass: '',
        captcha_code: '',
      },
      loading: false,
      remember: false, // 记住账号
      captcha: {
        y: '',
        src: [
          '../../../public/image/r1.jpg',
          '../../../public/image/r2.jpg',
          '../../../public/image/r3.jpg',
          '../../../public/image/r4.gif',
          '../../../public/image/r5.jpg',
          '../../../public/image/r6.jpg',
          '../../../public/image/r7.jpg',
        ] as string[],
      },
      baseCodeSrc: '../../../public/image/109834519_p0.jpg',
      codeSrc: '',
      bgstate: '', // 背景黑幕状态
      loginstate: '', // 卡片样式
      resend: <any>[], // 错误请求返回结果
      imgcode: '', // 验证码图片
      signin: false, // 显示登录卡片
      loadingbutton: false, // 登录按钮加载
      bgshow: false, // 显示背景
      openDetails: false,
      title: '登录',
      ...Cfg,
      bailan: 0,
      iconid: false,
      menumode: 'horizontal',
      showtext: false,
      headsize: 38,
      iconsize: 55,
      ellipsis: false,
      isRootPath: true,
      isopen: false,
      circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    }
  },
  methods: {
    /** 验证码成功 */
    onSuccess() {
      this.submitLogin('login')
      this.showVcode = false
    },
    /** 关闭窗口 */
    start() {
      if (this.signin) this.openlogin()
    },
    submitLogin(type: string) {
      let userInfo = Cfg.userInfo
      if (this.loading) return

      let configdata: object, url: string
      let infourl: string = '/user/info'
      configdata = this.loginconfig
      url = '/user/login'
      this.loading = true

      Method.api_post(url, configdata)
        .then((response) => {
          this.loading = false
          if (response.data.code == 200) {
            if (type == 'login') {
              Method.api_get(infourl).then((response2: any) => {
                if (response2.data.code == 200) {
                  if (this.remember) {
                    Method.localSet('loginInfo', {
                      user: this.loginconfig.user,
                      pass: this.loginconfig.pass,
                      remember: this.remember,
                    })
                  }
                  userInfo.state.isLogin = true
                  userInfo.state.isLoginDialogVisible = false
                  response2.data.data.headurl = Method.getHostUrl(
                    response2.data.data.headurl,
                    true,
                  )
                  userInfo.data = response2.data.data
                  Method.getInformation()
                  this.start()
                }
              })
            }
            ElMessage({
              message: response.data.msg,
              type: 'success',
            })
          } else {
            this.resend.push(response.data)
            ElMessage({
              message: response.data.msg,
              type: 'error',
            })
            this.refreshCode()
          }
        })
        .catch((error) => {
          this.resend.push(error)
          ElMessage({
            type: 'error',
            message: error,
          })
          this.loading = false
          this.start()
        })
    },

    openlogin() {
      if (this.signin) {
        this.bgstate = 'bgoff'
        this.loginstate = 'loginoff'
        setTimeout(() => {
          this.signin = false
          this.bgshow = false
        }, 300)
      } else {
        this.loginstate = 'loginon'
        this.bgstate = 'bgon'
        this.bgshow = true
        this.signin = true
      }
    },

    clickDetails(type: boolean) {
      this.openDetails = type
    },
    settitle() {
      if (this.title == '登录') this.title = '注册'
      else this.title = '登录'
    },
    goBack() {
      this.$router.back()
    },
    out() {
      ElMessageBox.alert('确定要退出登录吗？', '退出登录', {
        confirmButtonText: '确定',
        callback: () => {
          this.loginOut()
        },
      })
    },
    loginOut() {
      Method.api_get('/user/loginOut')
        .then((res: any) => {
          if (res.data.code == 200) {
            ElMessage({
              type: 'success',
              message: res.data.msg,
            })
            this.userInfo.state.isLogin = false
            this.$router.push({ path: '/postlist/0' })
          }
        })
        .catch((error) => {
          ElMessage({
            type: 'error',
            message: error,
          })
        })
    },
    showLoginDialog() {
      this.userInfo.state.isLoginDialogVisible =
        !this.userInfo.state.isLoginDialogVisible
    },
    /** 主题切换摆烂 */
    bailanle() {
      ++this.bailan
      if (this.bailan == 3) {
        ElMessage('点不动？刷新看看！')
      }
      if (this.bailan >= 5) {
        let 摆烂语句 = [
          '别点了，还没做呢~',
          '没完没了了是吧？',
          '你行你来？',
          '凑合看吧~',
          '你是不是想看到底有多少条消息？',
          '这不是bug',
          '我写的东西怎么可能会有bug',
          '你觉得很对是吧？',
          '你再怎么点都没用！',
          '怎么这么固执？',
        ]
        if (this.$data.bailan === 100) {
          ElMessage({
            type: 'success',
            message: '根本难不倒他！！！',
          })
          let date = new Date()
          Method.localSet('accomplishment', {
            真的很闲: {
              Completed: true,
              time: date.getDate(),
            },
          })
        } else {
          ElMessage(摆烂语句[Math.floor(Math.random() * 摆烂语句.length)])
        }
      }
    },
    refreshCode() {
      this.imgcode = ''
      this.codeSrc = this.baseCodeSrc + '?t=' + new Date().getTime()
    },
  },
  created() {
    const loginInfo = Method.localGet('loginInfo', {
      remember: false,
      user: '',
      pass: '',
    })
    this.refreshCode()
    if (loginInfo.remember) {
      this.loginconfig.user = loginInfo.user
      this.loginconfig.pass = loginInfo.pass
      this.remember = loginInfo.remember
    }

    watch(
      () => this.$router.currentRoute.value.fullPath,
      (v) => {
        if (/\w+\/\d+/.test(v)) {
          if (/postlist\/\d+\/\d+/.test(v)) {
            this.isRootPath = false
          } else {
            this.isRootPath = true
          }
        } else {
          this.isRootPath = true
        }
      },
    )
    watch(
      () => this.$route.path,
      () => {
        this.openDetails = false
      },
    )
  },
  setup() {
    const toggleInput: Ref<HTMLElement | null> = ref(null)

    const menu: { [key: string]: Ref } = {
      user: ref(null) as Ref<HTMLElement | null>,
      tool: ref(null) as Ref<HTMLElement | null>,
      menu: ref(null) as Ref<HTMLElement | null>,
    }

    const handleLiClick = () => {
      toggleInput.value!.click()
    }
    function menuClick(type: string, isopen?: boolean) {
      if (menu[type].value) {
        Object.keys(menu).forEach((el) => {
          let obj = menu[el]
          if (obj.value == null) return
          if (isopen) {
            if (type !== el && menu[el].value) {
              obj.value.removeAttribute('open')
            }
          } else {
            obj.value.removeAttribute('open')
          }
        })
      }
    }

    return {
      ...menu,
      toggleInput,
      handleLiClick,
      menuClick,
    }
  },
}
</script>

<style scoped>
.site-title {
  font-weight: bold;
  font-size: 18px;
}

.flex-grow {
  flex-grow: 1;
}

.item li {
  padding: 4px 0;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.loginbody {
  border-radius: var(--el-border-radius-base);
  background-color: var(--el-color-white);
  max-height: 38rem;
  width: 80vw;
  max-width: 800px;
  box-shadow: var(--el-box-shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 6;
  pointer-events: auto;
}

.titleimg {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  height: 100%;
  max-width: 500px;
  max-height: 608px;
  border-radius: var(--el-border-radius-base);
  animation: loginOpenAnimation 0.4s forwards;
}
.title {
  font-size: 2rem;
}

.form {
  margin: 2rem 2rem 1rem 2rem;
  min-width: 300px;
  transition: all 0.4s ease;
  animation: loginOpenAnimation 0.4s forwards;
}
.captcha {
  min-width: 300px;
  margin: 2rem 2rem 1rem 2rem;
  .item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem;
  }
}

.bj {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--el-color-info-light-3);
  font-size: 1rem;
}

.bgoff {
  animation: bgOffAnimation 0.3s forwards;
}
.bgon {
  animation: bgOpenAnimation 0.3s forwards;
}
.loginoff {
  animation: loginOffAnimation 0.3s forwards;
}
.loginon {
  animation: loginOpenAnimation 0.3s forwards;
}

@keyframes loginOpenAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loginOffAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bgOpenAnimation {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: rgba(0, 0, 0, 0.3);
  }
}
@keyframes bgOffAnimation {
  0% {
    background-color: rgba(0, 0, 0, 0.3) v;
  }
  100% {
    background-color: transparent;
  }
}

@media (max-width: 768px) {
  .loginbody {
    width: 95vw;
    justify-content: center;
  }
}
</style>
